import { ScrollView, View, Text, Image, Input } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import searchImg from '@/assets/image/index/g_search.png'
import ServicePage from './components/servicepage';
import ShopPage from './components/shoppage';

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      cueNow: '',
      shopList: [],
      searchValue: '',
      shopUser: '',
      pageNum: 0,
    };
  }

  componentDidMount() {
    let { cueNow, searchValue } = getCurrentInstance().router.params;
    let shopUser = (Taro.getStorageSync('b2b-wechat@login')).shopUser;
    this.setState({
      shopUser,
      cueNow,
      searchValue
    },
      () => {
        this.searchClick()
      })
  }

  componentDidShow() { }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  searchClick() {
    let {
      main: { },
      actions: { action },
    } = this.props;
    let { cueNow, searchValue } = this.state;
    this.addSearchHistory()
    if (cueNow == 0) {
      action.queryService(searchValue)
    } else {
      let params = {
        keywords: searchValue,
        pageNum: 0,
        pageSize: 10,
      };
      action.commonChange('main.pageNum', 0)
      action.queryShop(params)
    }
  }

  tabClick(cueNow) {
    this.setState({ cueNow })
    let {
      main: { },
      actions: { action },
    } = this.props;
    let { searchValue } = this.state;
    if (cueNow == 0) {
      action.queryService(searchValue)
    } else {
      let params = {
        keywords: searchValue,
        pageNum: 0,
        pageSize: 10,
      };
      action.commonChange('main.pageNum', 0)
      action.queryShop(params)
    }
  }

  //添加搜索历史记录
  addSearchHistory() {
    let searchHistory = Taro.getStorageSync('homeSearchHistory');
    let { searchValue } = this.state;
    if (!searchValue) return;
    if (searchHistory && searchHistory.length > 0) {
      if (searchHistory.indexOf(searchValue) == -1) {
        searchHistory.unshift(searchValue);
        let dd = searchHistory.slice(0, 10);
        Taro.setStorageSync('homeSearchHistory', dd)
      }
    } else {
      searchHistory.unshift(searchValue);
      Taro.setStorageSync('homeSearchHistory', searchHistory)
    }
  }

  render() {
    let { cueNow, searchValue } = this.state;
    return (
      <View className="packageASearchList">
        <View className="searchBar">
          <View className="content">
            <Image src={searchImg} className="imgIcon" mode="widthFix"
              onClick={() => {
                this.setState({
                  pageNum: 0
                },
                  () => this.searchClick(),
                );
              }} />
            <Input
              className="searchText"
              maxlength={16}
              type="text"
              placeholder="请输入关键字搜索"
              value={searchValue}
              onInput={(e) => {
                let str = ''
                if (e.detail.value) {
                  let zz = e.detail.value.replace(
                    /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,
                    '',
                  );
                  str = zz.replace(
                    /[`~!@#$%^&*()=+|{}.<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？':;']/g,
                    '',
                  );
                }
                this.setState({
                  searchValue: str,
                });
              }}
              onConfirm={(e) => {
                this.setState({
                  pageNum: 0
                },
                  () => this.searchClick(),
                );
              }}
            />
          </View>
          <View className="btn"
            onClick={() => {
              Taro.navigateBack();
            }}>
            <Text>取消</Text>
          </View>
        </View>
        <View className="barBox">
          <View
            className="t_view"
            onClick={() =>
              this.tabClick(1)
            }>
            <Text
              className={cueNow == 1 ? 't_a_test' : 't_text'}>
              商品
            </Text>
            <View className={cueNow == 1 ? 't_a_border' : 't_border'}></View>
          </View>
          <View
            className="t_view"
            onClick={() =>
              this.tabClick(0)
            }>
            <Text
              className={cueNow == 0 ? 't_a_test' : 't_text'}>
              服务
            </Text>
            <View className={cueNow == 0 ? 't_a_border' : 't_border'}></View>
          </View>
        </View>
        {cueNow == 0 ?
          <ServicePage searchValue={searchValue} cueNow={cueNow} />
          :
          <ShopPage searchValue={searchValue} cueNow={cueNow} />
        }
      </View>
    );
  }
}
